<template>
	<view class="pay">
		
		<view class="address">
			<view class="list b-b"  @click.stop="goToChangeAddress">
				<view class="wrapper" v-if="params.address.length !== 0">
					<view class="address-box">
						<text class="address">{{params.address}} {{params.area}}</text>
					</view>
					<view class="u-box">
						<text class="name">{{params.name}}</text>
						<text class="mobile">{{params.mobile}}</text>
					</view>
				</view>
				<view class="wrapper" v-else>
					请选择收货地址
				</view>
				<text class="yticon"> > </text>
			</view>
		</view>
		
		
		<view class="content" v-if="!order_number">
			<radio-group @change="payme">
			<view class="pay_methods">
				请选择支付方式
			</view>
			<view class="h">
				<view class="left">
					<image class="img2" src="../../static/wxzf.png" mode="aspectFit"></image>
					<view class="mm">
						微信支付
					</view>
				</view>
				<radio :checked="true" value="2"></radio>
			</view>
			
			<button type="default" @click="paybtn" class="zf">立即支付</button>
			</radio-group>
		</view>
		
		
	</view>
</template>

<script>
	import { mapState,mapMutations} from 'vuex'
	export default {
		data () {
			return {
				value: '2',        // 默认为支付宝支付
				flag: false,
				order_number: '',     // 第二次付款的订单号
				params: {
					address: '',
					area: '',
					name: '',
					mobile: ''
				}
			}
		},
		computed: {
			...mapState(['storeaddcs','cart'])
		},
		onLoad(options) {
			if (options.address) {
				let obj = JSON.parse(options.address)
				const {name,area,address,mobile} = obj
				this.params.name = name
				this.params.area = area
				this.params.address = address
				this.params.mobile = mobile
			}
		},
		methods: {
			...mapMutations(['ChangeAddcs']),
			// 前往选择地址
			goToChangeAddress () {
				uni.navigateTo({
					url: '../../pages/address/address'
				})
			},
			backfun () {
				uni.navigateBack()
			},
			payme (e) {
				this.value = e.detail.value
			},
			/*
				第一次支付
			*/
			async paybtn () {
					if (this.params.name.trim().length === 0 || this.params.area.trim().length === 0 || this.params.address.trim().length === 0  || this.params.mobile.trim().length === 0 ) return uni.showToast({
						icon: 'none',
						title: '请选择收货地址'
					})
					console.log(this.cart)
					let list = []
					this.cart.forEach((item) => {
						if (item.is_sel && item.is_del === '0') list.push(item)
					})
					uni.login({
						provider: 'weixin',
						success: async (code) => {
							console.log(code.code)
							const {data: res2} = await uni.$http.post('/pay/getWenXinOpenId',{code: code.code})
							if (res2.status !==0) return uni.showToast({
										title: '支付失败',
										duration: 1500,
										icon: 'error'
									})
									let openid = res2.data.openid
									let params = this.storeaddcs
									let obj = {
										cart: JSON.stringify(list),
										userPhone: this.params.mobile,
										userName: this.params.name,
										userAddress: this.params.address + this.params.area
									}
									const {data: res} = await uni.$http.post('/shop/weiXinCreateShopOrder',obj)
									if (res.status !== 200) return uni.showToast({
										title: '支付失败',
										duration: 1500,
										icon: 'error'
									})
									let order_number = res.data.order_number
									res.data.openid = openid
									console.log(res.data)
									uniCloud.callFunction({
										name: 'getweixinpay',
										data: res.data,
										success(e) {
											console.log(e)
											uni.requestPayment({
												provider: "wxpay",
												...e.result.orderInfo,	
												success(e) {
													console.log('123456')
													console.log(e)
													uni.navigateTo({
														url: '/pay/payResult/payResult?weiXinShopPay='+ order_number 
													})
												},
												fail(e) {
													console.log('Pay Fail')
													console.log(e)
													return uni.showToast({
														title: '支付失败',
														duration: 1500,
														icon: 'error'
													})
												}
											})
										},
										fail(e) {
											console.log('OK21')
											console.log(e)
										}
													
										})	
								}	
						
					})
			}
		}
	}
</script>

<style scoped lang="scss">
	page{
		padding-bottom: 120upx;
	}
	.list{
		display: flex;
		align-items: center;
		padding: 20upx 30upx;;
		background: #fff;
		position: relative;
	}
	.u-box{
		font-size: 28upx;
		color: $font-color-light;
		margin-top: 16upx;
		.name{
			margin-right: 30upx;
		}
	}
	.address-box{
		display: flex;
		align-items: center;
		.tag{
			font-size: 24upx;
			color: $base-color;
			margin-right: 10upx;
			background: #fffafb;
			border: 1px solid #ffb4c7;
			border-radius: 4upx;
			padding: 4upx 10upx;
			line-height: 1;
		}
		.address{
			font-size: 30upx;
			color: $font-color-dark;
		}
	}
	.wrapper{
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	.content {
		background-color: #FFFFFF;
		margin: 0 10px;
		padding: 10px;
	}
	.pay_methods {
		font-size: 14px;
		color: #000000;
		font-weight: 700;
		margin-bottom: 10px;
	}
	.h {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #007AFF;
	}
	.left {
		display: flex;
		align-items: center;
		justify-content: left;
		height: 40px;
		font-size: 14px;
	}
	.img {
		width: 40px;
		height: 40px;
	}
	.img2 {
		width: 35px;
		height: 35px;
		margin-right: 5px;
		margin-left: 2px;
	}
	.zf {
		background-color: #007AFF;
		color: #FFFFFF;
		margin-top: 20px;
		font-size: 14px;
		width: 200px;
	}
</style>


